<template>
  <MdEditor v-model="localValue" theme="light" :previewOnly="previewOnly"
            :toolbarsExclude="toolbarsExclude" @change="changeValue" style="height: 250px"></MdEditor>
</template>

<script>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { props } from '@/components/markdown/propsEmits'
import { ref, toRefs, watch } from 'vue'

export default {
  name: 'markdown',
  setup (props, { emit }) {
    const {
      modelValue,
      previewOnly,
      toolbarsExclude
    } = toRefs(props)
    const localValue = ref('')
    localValue.value = modelValue.value
    const changeValue = (e) => {
      localValue.value = e
      emit('update:modelValue', e)
    }
    watch(() => modelValue.value, (newValue) => {
      localValue.value = newValue
    })
    return {
      changeValue,
      previewOnly,
      toolbarsExclude,
      localValue
    }
  },
  components: { MdEditor },
  props
}
</script>

<style scoped>

</style>
